<!-- 创建时间: 2019年10月28日 星期一 15:14 车牌选择器，主要用于选择车牌的 省简称 和 区代码 -->
<template>
    <div class="PlateSelector_container">
        <mt-popup
            v-model="popupVisibleSub"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom"
            style="width: 100%"
        >
            <mt-picker :slots="slots" @change="onValuesChange" showToolbar>
                <div class="picker-toolbar-title">
                    <div class="usi-btn-cancel" @click="popupVisibleSub=!popupVisibleSub">取消</div>
                    <div class>请选择省区</div>
                    <div class="usi-btn-sure" @click="setPlate">确定</div>
                </div>
            </mt-picker>
        </mt-popup>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Popup, Picker } from "mint-ui";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            showToolbar: true,
            slots: [
                {
                    values: [
                        "京",
                        "湘",
                        "津",
                        "鄂",
                        "沪",
                        "粤",
                        "渝",
                        "琼",
                        "翼",
                        "川",
                        "晋",
                        "贵",
                        "辽",
                        "云",
                        "吉",
                        "陕",
                        "黑",
                        "甘",
                        "苏",
                        "青",
                        "浙",
                        "皖",
                        "藏",
                        "闽",
                        "蒙",
                        "赣",
                        "桂",
                        "鲁",
                        "宁",
                        "豫",
                        "新"
                    ],
                    textAlign: "left"
                },
                {
                    divider: true,
                    content: "-"
                },
                {
                    values: [
                        "A",
                        "B",
                        "C",
                        "D",
                        "E",
                        "F",
                        "G",
                        "H",
                        "J",
                        "K",
                        "L",
                        "M",
                        "N",
                        "O",
                        "P",
                        "Q",
                        "R",
                        "S",
                        "T",
                        "U",
                        "V",
                        "W",
                        "X",
                        "Y",
                        "Z"
                    ],
                    textAlign: "right"
                }
            ],
            // 中间件，显示或隐藏
            popupVisibleSub: false,
            // 用户最终选择的车牌
            PlateValues: []
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        popupVisibleSub: function(newval, oldval) {
            this.$emit("setPopupVisible", newval);
        },
        popupVisible: function(newval) {
            this.popupVisibleSub = newval;
        }
    },
    //方法集合
    methods: {
        onValuesChange(picker, values) {
            this.PlateValues = picker.getValues();
            this.$emit("getPlateValues", this.PlateValues, 0);
        },
        setPlate() {
            this.popupVisibleSub = false;
            this.$emit("getPlateValues", this.PlateValues, 1);
        }
    },
    // 车辆车牌省位选择控制显示或隐藏控制器 popupVisible
    props: ["popupVisible"],
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.PlateSelector_container {
    .picker-toolbar-title {
        display: flex;
        justify-content: space-around;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }
    .usi-btn-cancel,
    .usi-btn-sure {
        color: #ff6600;
    }
}
</style>